<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="display: flex; align-items: center">
          <img src="../assets/imgs/logo.png" alt="" />
          <a>长春农安经济开发区智能办公系统</a>
        </div>
        <marquee-text v-if="data[0]?.title" :repeat="10" :duration="15" style="width:50%">
          <span v-for="(i, idx) in data" :key="idx">{{ i?.title }}：{{ i?.titleValue
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </marquee-text>
        <el-dropdown>
          <!-- <span class="el-dropdown-link">
            {{ user }}
          </span> -->
          <span class="el-dropdown-link">
            {{ user }}<el-icon style="color:black">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-item :icon="Plus" @click="logOut">退出</el-dropdown-item>
          </template>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu default-active="/basicinfor" class="el-menu-vertical-demo" :collapse="isCollapse" router>
            <el-menu-item index="/basicinfor">
              <el-icon>
                <Memo />
              </el-icon>
              <span>基本信息</span>
            </el-menu-item>
            <el-menu-item index="/economicdata">
              <el-icon>
                <TrendCharts />
              </el-icon>
              <span>经济数据</span>
            </el-menu-item>
            <el-menu-item index="/companyinfo">
              <el-icon>
                <DataAnalysis />
              </el-icon>
              <span>企业信息</span>
            </el-menu-item>
            <el-menu-item index="/developmentmap">
              <el-icon>
                <MapLocation />
              </el-icon>
              <span>开发区地图</span>
            </el-menu-item>
            <el-sub-menu>
              <template #title>
                <el-icon>
                  <DocumentCopy />
                </el-icon>
                <span style="color: rgb(229, 231, 237)">招商引资</span>
              </template>
              <el-menu-item index="/inviteinvestment/Existingpro" style="color: rgb(229, 231, 237)">已有项目</el-menu-item>
              <el-menu-item index="/inviteinvestment/Interms" style="color: rgb(229, 231, 237)">在谈项目</el-menu-item>
              <el-menu-item index="/inviteinvestment/reserve" style="color: rgb(229, 231, 237)">储备项目</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/projectproposal">
              <el-icon>
                <Guide />
              </el-icon>
              <span>项目建设</span>
            </el-menu-item>
            <el-menu-item index="/investmentpolicy">
              <el-icon>
                <FolderOpened />
              </el-icon>
              <span>招商政策</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { GetData } from "@/api";
import MarqueeText from 'vue-marquee-text-component'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Memo,
  TrendCharts,
  DataAnalysis,
  MapLocation,
  DocumentCopy,
  Guide,
  FolderOpened,
  ArrowDown
} from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter()
const user = ref(localStorage.getItem('userName'))
const screenWidth = ref(document.body.clientWidth);
const isCollapse = ref(false);
const data = ref([])

const getTitle = async () => {
  const res = await GetData('/getSysList?type=0')
  console.log(res, 123123);
  data.value = res

}
// 退出
const logOut = ()=>{
  sessionStorage.removeItem('token')
  router.push('/login')
}
onMounted(() => {
  getTitle()
  window.onresize = () => {
    screenWidth.value = document.body.clientWidth;
  };
});
watch(
  () => screenWidth.value,
  (newlist, oldlist) => {

    if (newlist < 700) {
      isCollapse.value = true;
    } else {
      isCollapse.value = false;
    }
  }
);
</script>
<style lang="less">
.el-header {
  background-color: rgb(223, 223, 223);
  height: 7vh;
  display: flex;
  justify-content: space-around;
  position: relative;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
}

.el-header img {
  width: 3vw;
  height: 4.5vh;
}

.el-header a {
  color: rgb(74, 124, 178);
  font-size: 1.6vw;
  line-height: 7vh;
  font-weight: bold;
}

.el-header p {
  line-height: 7vh;
}

.el-header p span {
  margin-left: 1vw;
  color: rgb(55, 55, 55);
  font-size: 0.9vw;
}

.common-layout {
  height: 100%;
}

.el-menu {
  height: 100%;
  background: url("../assets/imgs/aside1.png");
  background-position: cover;
  color: rgb(229, 231, 237);
}

.el-aside {
  height: 100%;
  width: 200px !important;
  .el-icon {
    color: rgb(91, 198, 246) !important;
  }
}

.el-main {
  width: calc(100% - 200px);
}

.el-menu-item span {
  color: rgb(229, 231, 237);
}

.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: rgb(22, 55, 87) !important;
}

.el-sub-menu.is-opened span {
  color: rgb(102, 222, 239) !important;
}

.el-menu-item.is-active span {
  color: rgb(102, 222, 239) !important;
}

.el-menu-item.is-active {
  color: rgb(102, 222, 239) !important;
}

.el-container {
  height: 100%;
  overflow-y: hidden;
}

</style>
